<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/cart.css">
</head>

<body>
    <div class="cart-wrap">
        <!-- 购物车头部 -->
        <div class="cart-header">
            <ul class="cart-lists" style="height: 50px; background-color: #efefef;">
                <li class="cart-check">
                    <input type="checkbox" id="whole" class="whole-check">
                    <label for="whole" class=""></label><span>&nbsp;全选</span>
                </li>
                <li class="cart-con">商品</li>
                <li class="cart-price">单价(元)</li>
                <li class="cart-amount">数量</li>
                <li class="cart-sum">小计</li>
                <li class="cart-option">操作</li>
            </ul>
        </div>
        <!-- 购物车列表内容 -->
        <!-- 第一个店铺 -->
        <div class="cart-box">
            <div class="shop-info">
                <div class="all-check fl">
                    <!-- 商铺的全选 -->
                    <input type="checkbox" id="showall1" class="shop-check">
                    <label for="showall1"></label>
                </div>
                <div class="shop-name"><a href="">商城自营1</a></div>
            </div>
            <!-- 购物车列表内容 -->
            <div class="cart-content">
                <!-- 商品信息 -->
                <ul class="cart-lists">
                    <li class="cart-check">
                        <input type="checkbox" id="check1" class="son-check">
                        <label for="check1"></label>
                    </li>
                    <li class="cart-con">
                        <div class="cart-img">
                            <a href=""><img src="images/cartS.jpg" alt=""></a>
                        </div>
                        <div class="cart-text fs12">表正品男表防水自动机械表经典钢带男士手表潮流休闲腕表5845</div>
                    </li>
                    <li class="cart-price">
                        <p class="price">10</p>
                    </li>
                    <li class="cart-amount">
                        <div class="amount-box">
                            <button class="reduce" disabled>-</button>
                            <input type="text" value="1">
                            <button class="add">+</button>
                        </div>
                    </li>
                    <li class="cart-sum">
                        <p class="price-sum">10</p>
                    </li>
                    <li class="cart-option">
                        <div class="cart-dele">删除</div>
                    </li>
                </ul>

                <ul class="cart-lists">
                    <li class="cart-check">
                        <input type="checkbox" id="check2" class="son-check">
                        <label for="check2"></label>
                    </li>
                    <li class="cart-con">
                        <div class="cart-img">
                            <a href=""><img src="images/cartS.jpg" alt=""></a>
                        </div>
                        <div class="cart-text fs12">表正品男表防水自动机械表经典钢带男士手表潮流休闲腕表5845</div>
                    </li>
                    <li class="cart-price">
                        <p class="price">20</p>
                    </li>
                    <li class="cart-amount">
                        <div class="amount-box">
                            <button class="reduce" disabled>-</button>
                            <input type="text" value="1">
                            <button class="add">+</button>
                        </div>
                    </li>
                    <li class="cart-sum">
                        <p class="price-sum">20</p>
                    </li>
                    <li class="cart-option">
                        <div class="cart-dele">删除</div>
                    </li>
                </ul>
            </div>

        </div>
        <!-- 第二个店铺 -->
        <div class="cart-box">
            <div class="shop-info">
                <div class="all-check fl">
                    <!-- 商铺的全选 -->
                    <input type="checkbox" id="showall2" class="shop-check">
                    <label for="showall2"></label>
                </div>
                <div class="shop-name"><a href="">商城自营2</a></div>
            </div>
            <!-- 购物车列表内容 -->
            <div class="cart-content">
                <ul class="cart-lists">
                    <li class="cart-check">
                        <input type="checkbox" id="check3" class="son-check">
                        <label for="check3"></label>
                    </li>
                    <li class="cart-con">
                        <div class="cart-img">
                            <a href=""><img src="images/cartS.jpg" alt=""></a>
                        </div>
                        <div class="cart-text fs12">表正品男表防水自动机械表经典钢带男士手表潮流休闲腕表5845</div>
                    </li>
                    <li class="cart-price">
                        <p class="price">30</p>
                    </li>
                    <li class="cart-amount">
                        <div class="amount-box">
                            <button class="reduce" disabled>-</button>
                            <input type="text" value="1">
                            <button class="add">+</button>
                        </div>
                    </li>
                    <li class="cart-sum">
                        <p class="price-sum">30</p>
                    </li>
                    <li class="cart-option">
                        <div class="cart-dele">删除</div>
                    </li>
                </ul>

                <ul class="cart-lists">
                    <li class="cart-check">
                        <input type="checkbox" id="check4" class="son-check">
                        <label for="check4"></label>
                    </li>
                    <li class="cart-con">
                        <div class="cart-img">
                            <a href=""><img src="images/cartS.jpg" alt=""></a>
                        </div>
                        <div class="cart-text fs12">表正品男表防水自动机械表经典钢带男士手表潮流休闲腕表5845</div>
                    </li>
                    <li class="cart-price">
                        <p class="price">40</p>
                    </li>
                    <li class="cart-amount">
                        <div class="amount-box">
                            <button class="reduce" disabled>-</button>
                            <input type="text" value="1">
                            <button class="add">+</button>
                        </div>
                    </li>
                    <li class="cart-sum">
                        <p class="price-sum">40</p>
                    </li>
                    <li class="cart-option">
                        <div class="cart-dele">删除</div>
                    </li>
                </ul>
            </div>

        </div>

        <!-- 第三个店铺 -->
        <div class="cart-box">
            <div class="shop-info">
                <div class="all-check fl">
                    <!-- 商铺的全选 -->
                    <input type="checkbox" id="showall3" class="shop-check">
                    <label for="showall3"></label>
                </div>
                <div class="shop-name"><a href="">商城自营3</a></div>
            </div>
            <!-- 购物车列表内容 -->
            <div class="cart-content">
                <ul class="cart-lists">
                    <li class="cart-check">
                        <input type="checkbox" id="check5" class="son-check">
                        <label for="check5"></label>
                    </li>
                    <li class="cart-con">
                        <div class="cart-img">
                            <a href=""><img src="images/cartS.jpg" alt=""></a>
                        </div>
                        <div class="cart-text fs12">表正品男表防水自动机械表经典钢带男士手表潮流休闲腕表5845</div>
                    </li>
                    <li class="cart-price">
                        <p class="price">50</p>
                    </li>
                    <li class="cart-amount">
                        <div class="amount-box">
                            <button class="reduce" disabled>-</button>
                            <input type="text" value="1">
                            <button class="add">+</button>
                        </div>
                    </li>
                    <li class="cart-sum">
                        <p class="price-sum">50</p>
                    </li>
                    <li class="cart-option">
                        <div class="cart-dele">删除</div>
                    </li>
                </ul>

                <ul class="cart-lists">
                    <li class="cart-check">
                        <input type="checkbox" id="check6" class="son-check">
                        <label for="check6"></label>
                    </li>
                    <li class="cart-con">
                        <div class="cart-img">
                            <a href=""><img src="images/cartS.jpg" alt=""></a>
                        </div>
                        <div class="cart-text fs12">表正品男表防水自动机械表经典钢带男士手表潮流休闲腕表5845</div>
                    </li>
                    <li class="cart-price">
                        <p class="price">60</p>
                    </li>
                    <li class="cart-amount">
                        <div class="amount-box">
                            <button class="reduce" disabled>-</button>
                            <input type="text" value="1">
                            <button class="add">+</button>
                        </div>
                    </li>
                    <li class="cart-sum">
                        <p class="price-sum">60</p>
                    </li>
                    <li class="cart-option">
                        <div class="cart-dele">删除</div>
                    </li>
                </ul>
                <ul class="cart-lists">
                    <li class="cart-check">
                        <input type="checkbox" id="check7" class="son-check">
                        <label for="check7"></label>
                    </li>
                    <li class="cart-con">
                        <div class="cart-img">
                            <a href=""><img src="images/cartS.jpg" alt=""></a>
                        </div>
                        <div class="cart-text fs12">表正品男表防水自动机械表经典钢带男士手表潮流休闲腕表5845</div>
                    </li>
                    <li class="cart-price">
                        <p class="price">70</p>
                    </li>
                    <li class="cart-amount">
                        <div class="amount-box">
                            <button class="reduce" disabled>-</button>
                            <input type="text" value="1">
                            <button class="add">+</button>
                        </div>
                    </li>
                    <li class="cart-sum">
                        <p class="price-sum">70</p>
                    </li>
                    <li class="cart-option">
                        <div class="cart-dele">删除</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 总价 -->
    <div class="cart-footer">
        <div>已选择的商品:<span class="buy-num">0</span></div>
        <div>总价:<span class="pay-price">0</span></div>
    </div>
    <script>
        // 1.所有的复选框选中或者取消
        // 2.全选选中-全选取消------合计
        // 3.该店铺商品全选选中-全选取消 ------合计
        // 4.该店铺商品全部选中,全选按钮选中-任何一个不选,全选取消
        // 5.商品全部选中,全选按钮选中-任何一个不选,全选取消 ------合计
        // 6.加事件 ------合计
        // 7.减事件 ------合计
        // 8.输入产品计算商品价格小计 ------合计
        // 9.删除事件 ------合计
    </script>
    <script src="./js/index.js"></script>
</body>

</html>